import { useSelector } from 'react-redux'
import './OrderDetails.scss'
import type { RootState } from '../../../store'
import { OrderList } from '../../../components/orderList'
import { useEffect, useState } from 'react'
import { getShopInfoOneAPI, type ShopItem } from '../../../api/shops'
import { getOneAddressAPI, type addressItem } from '../../../api/address'
import { AlipaySquareFill, MessageOutline } from 'antd-mobile-icons'
import { Loading } from '../../../layouts/MainLayout/components/loading'
import { Button, Modal, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
const OrderDetails = () => {

    const { selectOrder, loading } = useSelector((state: RootState) => {
        return state.order
    })
    const navigate = useNavigate()
    const [shopInfo, setShopInfo] = useState<ShopItem>()
    const [addressInfo, setAddressInfo] = useState<addressItem>()
    const [error, setError] = useState<string | null>(null)
    useEffect(() => {
        const getShopInfo = async () => {
            if (!selectOrder) {
                return
            }
            const res = await getShopInfoOneAPI(selectOrder?.shops_id)
            console.log(res)
            setShopInfo(res.data.data)
        }
        getShopInfo()
    }, [selectOrder])

    useEffect(() => {
        if (!selectOrder?.address_id) {
            return
        }
        const getOneAddress = async () => {
            const res = await getOneAddressAPI(selectOrder.address_id)
            console.log(res)
            console.log(res.data.code)
            if (res.data.code === 0) {
                setAddressInfo(res.data.data[0])
            } else {
                setError(res.data.msg || '获取地址错误！')
            }

        }
        getOneAddress()
    }, [selectOrder])
    useEffect(() => {
        if (error) {
            Toast.show({ content: error })
            setError(null)
        }
    }, [error])

    const confirmPay = (pay: string) => {
        
        Modal.confirm({
            title: '是否确认支付',
            onConfirm:()=>{
                console.log(`用户${pay}支付`)
            }
        })
       
    }

    if (loading) {
        return <Loading />
    }

    if (!selectOrder || !shopInfo) {
        return <div>
            数据获取失败
        </div>
    }


    return <div className='orderDetails'>
        <div className='orderDetails_card'>
            <OrderList orderList={selectOrder.orderItemList_id[0].orderItemList} isShowRight={true} shopInfo={shopInfo} />
        </div>
        <div className='orderDetails_address'>
            <div className='orderDetails_address_title'>
                配送信息
            </div>
            <div className='orderDetails_addressInfo'>
                <div className='orderDetails_left'>
                    <span>收货人：</span>
                    <span>联系电话：</span>
                    <span>收货地址：</span>
                </div>
                <div className='orderDetails_right'>
                    <span> {addressInfo?.name}</span>
                    <span>{addressInfo?.mobile}</span>
                    <span> {addressInfo?.address}</span>
                </div>
            </div>
        </div>
        <div className='orderDetails_foot'>
            {
               selectOrder.status===1 &&  ( <div className='orderDetails_pay'>
                <Button onClick={() => confirmPay('alipay')}>
                    <div className='orderDetails_btnPay'>
                        <AlipaySquareFill fontSize={22} color='blue' />支付宝支付
                    </div>
                </Button>

                <Button onClick={() => confirmPay('wxpay')}>
                    <div className='orderDetails_btnPay'>
                        <MessageOutline color='green' fontSize={22} />微信支付
                    </div>
                </Button>


            </div>)
            }
           
        </div >
    </div >


}

export { OrderDetails }